<template>
  <div style="width: 100%; height: 100%; position: absolute; top: 10px;">
    <el-input
      v-model="search"
      style="width: 240px; height: 28px; font-size: 12px;"
      placeholder="搜索课程"
      :prefix-icon="Search"
      @keyup.enter="handleSearch(search)"
    />
    <div style="width: 100%; height: 590px; overflow-y: auto;" class="class">
      <ul style="list-style-type: none; padding: 0px; padding-top: 10px; margin: 0px;">
        <li
          v-for="(item, index) in classView"
          :key="index"
          :style="{ background: colors[index] }"
          @click="ManageCourseInfo(item)"
        >
          <h5 style="color: white; font-size: 13px; padding: 10px; position: absolute; left: 10px;">
            {{ item.courseName }}
          </h5>
          <img
            v-if="item.teacherHead"
            :src="item.teacherHead"
            style="height: 16px; width: 20px; border-radius: 8px; border: 1px solid white; position: absolute; bottom: 15px; left: 20px;"
          />
          <div
            v-else
            style="height: 16px; width: 20px; border-radius: 8px; border: 1px solid white; position: absolute; bottom: 15px; left: 20px;"
          ></div>
          <h6 class="courseInfo" style="width: 70px; position: absolute; left: 35px; bottom: 4px;">
            {{ item.teacherName }}
          </h6>
          <h6 class="courseInfo" style="width: 110px; position: absolute; left: 130px; bottom: 4px;">
            {{ item.courseTime }} - {{ item.class }}
          </h6>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
const router = useRouter();

const Store = useCounterStore();
const search = ref('');
const props = defineProps({
  classes: {
    type: Array as () => Array<{
      classId: number;
      color: string;
      courseName: string;
      teacherHead: any;
      teacherName: string;
      courseTime: string;
      class: string;
    }>,
    required: true,
  },
});
const classView=ref(props.classes);



// 预先生成随机颜色
const colors = ref<string[]>([]);
// 初始化时生成颜色
onMounted(() => {
  colors.value = props.classes.map(() => getRandomColor());
});
function getRandomColor() {
  const randomIndex = Math.floor(Math.random() * Store.$state.classColor.length);
  return Store.$state.classColor[randomIndex];
}
// 监听 classView 的变化，重新生成颜色
watch(() => classView.value,(newClasses) => {
    colors.value = newClasses.map(() => getRandomColor());
  },{ immediate: true }
);



function handleSearch(label: string) {
  console.log('查找课程：' + label);
   // 如果搜索关键字为空，则显示所有课程
   if (!label.trim()) {
    classView.value = [...props.classes];
    return;
  }
  const filteredClasses = props.classes.filter((item) => {
    // 检查课程名称、教师名称、课程时间或班级是否包含搜索关键字
    return (
      item.courseName.toLowerCase().includes(label.toLowerCase()) ||
      item.teacherName.toLowerCase().includes(label.toLowerCase()) ||
      item.courseTime.toLowerCase().includes(label.toLowerCase()) ||
      item.class.toLowerCase().includes(label.toLowerCase())
    );
  });
  // 更新显示的课程列表
  classView.value = filteredClasses;
}


function ManageCourseInfo(item:any){
  //点击课程跳转到课程详情页面
  router.push({
    path: '/Course',
    query: {
      classId: item.classId,
      courseName: item.courseName,
      teacherName: item.teacherName,
      courseTime: item.courseTime,
      className: item.class
    }
  });
}

</script>
<style scoped>
li{
    /* background: linear-gradient(to right, #57e7a636, 201, 201, 0.804)); */
    width:291px;
    height:97px;
    display: inline-block;/* 横向 */
    margin-right: 35px;
    margin-top: 10px;
    margin-bottom:5px;
    border-radius: 4px;
    position:relative;
}
.courseInfo{
  color: white;
  margin: 10px;
  overflow: hidden; /* 隐藏 */
  white-space: nowrap;/* 禁止换行 */
  font-size: 11px;
}


.class {
    width: 100%;
    height: 570px;
    overflow-y: auto;
    position: relative;
  }
 
  .class::-webkit-scrollbar {
    width: 5px; /* 滚动条的宽度 */
  }
 
  .class::-webkit-scrollbar-track {
    background: #e3e6e9e3; /* 滚动条轨道的背景 */
  }
 
  .class::-webkit-scrollbar-thumb {
    background: #c2d0df; /* 滑块的颜色 */
    border-radius: 6px; /* 滑块的圆角 */
  }
 
  .class::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0; /* 当鼠标悬停在滑块上时的颜色 */
  }
</style>